<template class="nr1">
  <div class="nr">
    <div class="in">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100" class="demo-ruleForm">
    <el-form-item label="账号" prop="cardno">
        <el-input type="text" v-model="ruleForm.cardno" autocomplete="off" autofocus class="logininput"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off" class="logininput"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="bj">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
</el-form>
</div>
  </div>
</template>

<script>
import axios from 'axios'

 export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value=== "") {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        fullscreenLoading:false,
        bj:false,
        ruleForm: {
          cardno: '',
          password: ''
        },
        rules: {
          cardno: [
            { validator: validatePass, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass2, trigger: 'blur' }
            ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
                axios.get("/api/login?name="+this.ruleForm.cardno+"&pwd="+this.ruleForm.password).then( aa=>{
                     if(!aa.data){
                                  alert('账号或密码错误')
              }else{
                sessionStorage.setItem("user",JSON.stringify(aa.data))
               this.$store.commit('getUsers')
               

                this.fullscreenLoading=true;
                 this.bj=true;
                setTimeout(()=>{
                  this.$router.push("/home")
                  this.fullscreenLoading=false;
                  this.bj=false;
                },1000)

              }
                })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      login() {
      login(this.ruleForm).then(response =>{
       if (response.data != null) {
            sessionStorage.setItem('account',JSON.stringify(response.data)) 
             if(sessionStorage.getItem('account')){
                this.$router.push("/about")
              }
          } else {
            alert("账户已经冻结")
          }
      })
      },
    
    },created(){
         this.$store.commit('getUsers')
   
    }
  }
</script>

<style scoped>
    .nr{

    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items:center ;
    }

    .in{
      border-radius:15px ;
      background-clip: padding-box;
      width:25%;
      padding: 35px 35px 15px;
      background-color: #fff;
      border: 1xp solid #eaeaea;
      box-shadow: 0 0 25px #cac6ca; 

    }
  .nr {
      background: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg') no-repeat;
      background-size: 100% 130%;
    }
</style>